<template>
  <div class="index-container ec-container">
    <!-- 搜索部分 -->
    <el-row :gutter="10" class="form">
      <el-col :span="4">
        <div class="grid-content">
          <span>渠道：</span>
          <el-select class="w60" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <span>平台：</span>
          <el-select class="w60" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content p10">
          <span>店铺编码：</span>
          <el-select class="w40" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content p10">
          <span>店铺名称：</span>
          <el-select class="w40" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <span>日期：</span>
          <el-select class="w60" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <span>时间：</span>
          <el-date-picker class="w60" v-model="value1" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </div>
      </el-col>
    </el-row>

    <!-- 新老客户活跃数据 -->
    <el-row :gutter="10">
      <!-- 新老客户统计数 -->
      <el-col :span="12" class="left-wrap">
        <div class="top-wrap">
          <div class="client-number">
            <h2>销售额</h2>
            <h3>{{basicData.saleTotalAmount}}</h3>
          </div>
          <div class="client-number">
            <h2>订单数</h2>
            <h3>{{basicData.totalOrderQuantity}}</h3>
          </div>
          <div class="client-number">
            <h2>商品数量</h2>
            <h3>{{basicData.totalProductQuantity}}</h3>
          </div>
        </div>
        <div class="top-wrap">
          <div class="client-number">
            <h2>折扣率</h2>
            <h3>{{basicData.discountRate}}</h3>
          </div>
          <div class="client-number">
            <h2>客单价</h2>
            <h3>{{basicData.customersUnitPrice}}</h3>
          </div>
          <div class="client-number">
            <h2>笔件数</h2>
            <h3>{{basicData.orderUnitNumber}}</h3>
          </div>
        </div>
        
      </el-col>
      <!-- 统计表格 -->
      <el-col :span="12">
        <div class="bottom-wrap">
          <p>以下指标是截止昨天最新时间的数据，每天会更新；</p>
          <p>* 粉丝：微信关注人数，取openID的数；</p>
          <p>* 客户数：未注册的人数，即有购买但未注册和有可触达信息的人；</p>
          <p>* 活跃客户：近一年有有效购买的客户；</p>
          <p>* 活跃新客：近一年有有效购买且第一次购买在近一年的客户；</p>
          <p>* 活跃老客：近一年有有效购买，但一年前有购买记录的客户；</p>
        </div>
      </el-col>
    </el-row>

    <!-- 平台客户分布图 -->
    <el-row :gutter="10">
      <el-col :span="12">
        <div id="distribution" class="grid-content"></div>
      </el-col>
      <el-col :span="12">
        <div id="tendency" class="grid-content"></div>
      </el-col>
    </el-row>

    <!-- 统计表格部分 -->
    <div class="table-wrap">
      <p class="title">销售明细数据</p>
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="saleDate"
        label="付款日期"
        width="150">
      </el-table-column>
      <el-table-column
        prop="totalOrderQuantity"
        label="订单数（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="saleTotalAmount"
        label="销售额（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="totalProductQuantity"
        label="商品数量（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="discountRate"
        label="折扣率（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="customersUnitPrice"
        label="客单价（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="unitPrice"
        label="件单价（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="orderUnitNumber"
        label="笔件数（总）"
        width="120">
      </el-table-column>
      <el-table-column
        prop="orderUnitPrice"
        label="笔单价"
        width="120">
      </el-table-column>
      <el-table-column
        prop="platformName"
        label="平台名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="platformCode"
        label="平台code"
        width="120">
      </el-table-column>
      <el-table-column
        prop="chnennelCode"
        label="渠道"
        width="120">
      </el-table-column>
      <el-table-column
        prop="storeName"
        label="店铺名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="storeCode"
        label="店铺编码"
        width="120">
      </el-table-column>
      <el-table-column
        prop="merchantName"
        label="商家名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="merchantNumber"
        label="商家编码">
      </el-table-column>
    </el-table>
  </div>


    
    
  </div>
</template>

<script>
import china from "../../../../../static/json/china";
import {
  querySaleOverviewBasicsData,
  querySaleOverviewDetailData,
  querySaleOverviewSaleTrendData,
  querySaleOverviewPlatSaleData,
  querySaleOverviewRegionSaleRateData,
  querySaleOverviewMapData
} from "@/assets/js/utils.js";
export default {
  data() {
    return {
      tableData: [], //表格数据
      value: "",
      value1: "",
      options: [
        {
          label: "选项1",
          value: "选项1"
        }
      ],
      basicData: {} //基础数据
    };
  },
  mounted() {
    this.getList();
    this.getDetailData();
    this.distribution();
    this.$echarts.registerMap("china", china);
    this.tendency();
    this.proportion();
    this.state();
  },
  methods: {
    //查询基础数据
    getList() {
      this.utils.request.querySaleOverviewBasicsData({}, res => {
        if (res.code == "0000") {
          this.basicData = res.data;
          console.log("基础数据", res);
        } else {
          console.log(res.msg)
        }
      });
    },
    //查询明细数据
    getDetailData() {
      this.utils.request.querySaleOverviewDetailData({}, res => {
        if (res.code == "0000") {
          this.tableData = res.data;
          console.log("明细数据", res);
        } else {
          // this.$toast(res.msg);
          console.log(res.msg)
        }
      });
    },
    handleClick(row) {
      console.log(row);
    },

    // 销售趋势
    distribution() {
      let distribution = document.getElementById("distribution");
      let myChartChina = this.$echarts.init(distribution);
      this.utils.request.querySaleOverviewSaleTrendData({},res => {
        if (res.code == "0000") {
          console.log("销售趋势", res);
          let option = {
            title: {
              text: "销售趋势"
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#283b56"
                }
              }
            },
            legend: {
              data: ["销售额（总）", "订单数（总）"]
            },
            toolbox: {
              show: true,
              feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
              }
            },
            dataZoom: {
              show: false,
              start: 0,
              end: 100
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: true,
                data: res.data.x
              },
              {
                type: "category",
                boundaryGap: true,
                data: res.data.x
              }
            ],
            yAxis: [
              {
                type: "value",
                scale: true,
                name: "销售额（总）（柱）",
                max: 30,
                min: 0,
                boundaryGap: [0.2, 0.2]
              },
              {
                type: "value",
                scale: true,
                name: "订单数（总）（线）",
                max: 1200,
                min: 0,
                boundaryGap: [0.2, 0.2]
              }
            ],
            series: [
              {
                name: "销售额",
                type: "bar",
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: res.data.y1
              },
              {
                name: "订单数",
                type: "line",
                data:  res.data.y2
              }
            ]
          };
          myChartChina.setOption(option);
        } else {
          this.$toast(res.msg);
        }
      });
    },

    // 平台销售分布
    tendency() {
      let tendency = document.getElementById("tendency");
      let myChartChina = this.$echarts.init(tendency);
      this.utils.request.querySaleOverviewPlatSaleData({},res => {
        console.log('平台销售',res)
        if(res.code == '0000'){
          let option = {
        title: {
          text: "平台销售分布"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ["京东", "天猫", "微信"]
        },
        xAxis: [
          {
            type: "category",
            data:res.data.x,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} 百万"
            }
          },
          {
            type: "value",
            name: "",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} 百万"
            }
          }
        ],
        series: [
          {
            name: "京东",
            type: "bar",
            data:res.data.y1
          },
          {
            name: "天猫",
            type: "bar",
            data: res.data.y2
          },
          {
            name: "微信",
            type: "line",
            yAxisIndex: 1,
            data: res.data.y3
          }
        ]
      };
      myChartChina.setOption(option);
        }else{
          console.log(res.msg)
        }
      })
      
    },

    // 区域销售占比  proportion
    proportion() {
      let tendency = document.getElementById("proportion");
      let myChartChina = this.$echarts.init(tendency);
      this.utils.request.querySaleOverviewRegionSaleRateData({},res=>{
        console.log('区域销售占比',res)
        if(res.code == '0000'){
          let names = [];
          let name = ''
          res.data.forEach(item =>{
            name = item.name
          })
          names.push(name)
          let option = {
        title: {
          text: "区域销售占比"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: 40,
          data:names
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: res.data
          }
        ]
      };
      myChartChina.setOption(option);
        }else{
          console.log(res.msg)
        }
      })
      
    },

    // 省份分布地图
    state() {
      // 基于准备好的dom，初始化echarts实例
      let myChartContainer = document.getElementById("myChartChina");
      let myChartChina = this.$echarts.init(myChartContainer);
      this.utils.request.querySaleOverviewMapData({},res=>{
        if(res.code == '0000'){
          console.log('省份',res)
          // 绘制图表
      let optionMap = {
        title: {
          text: "省份分布地图"
        },
        tooltip: {},
        legend: {
          orient: "vertical",
          left: "left"
        },
        visualMap: {
          min: 0,
          max: 1000000,
          left: "0%",
          top: "bottom",
          text: ["高", "低"],
          calculable: true,
          color: ["#0b50b9", "#c3e2f4"]
        },
        selectedMode: "single",
        series: [
          {
            name: "",
            type: "map",
            mapType: "china",
            itemStyle: {
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)"
              },
              emphasis: {
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            showLegendSymbol: true,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data:res.data
          }
        ]
      };
      let timesRun = 0;
      let interval = setInterval(function() {
        timesRun += 1;
        if (timesRun === 10) {
          clearInterval(interval);
        }
        myChartChina.setOption(optionMap);
      }, 100);

      window.onresize = function() {
        myChartChina.resize();
      };
        }else{
          console.log(res.msg)
        }
      })
      
    }
  }
};
</script>

<style scoped  lang="scss">
 @import "../../../../assets/css/dataCenterEcharts.css";
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.ec-container {
  /* 左侧客户统计数量 */
  .left-wrap {
    padding-top: 10px;
    .top-wrap {
      width: 100%;
      height: 120px;
      display: flex;
      justify-content: space-around;
      .client-number {
        width: 32%;
        text-align: center;
        background-color: #fff;
        color: #333;
        margin-bottom: 10px;
      }
    }
  }
  .bottom-wrap {
    background-color: #fff;
    padding: 40px;
    margin: 10px 8px 0 0;
    p {
      line-height: 25px;
    }
  }
  /* 时间 */
  .time-wrap {
    margin-top: 20px;
    .wrap {
      background-color: #fff;
      text-align: left;
      padding: 20px;
      .title {
        font-size: 20px;
        font-weight: 700;
        color: #333;
      }
      .content {
        padding: 5px 0;
      }
    }
  }
  .grid-content {
  }
  .map {
    margin-top: 10px;
  }
  .tips {
    background-color: #fff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }
  #myChartChina {
    height: 586px;
  }
  .form /deep/ .el-col .grid-content .el-select {
    width: 150px;
  }
  .form {
    .el-date-editor {
      width: 120px;
    }
  }
}
</style>
